<template>
	<view class="upload">
		<view class="upload__list" v-for="(item,index) in value" :key="index">
			<view class="upload__list--image" @click="previewImage(index)">
				<image :src="img(item)" mode="aspectFill"></image>
			</view>
			<view class="upload__list--deletable" @click="deleteImage(index)">
				<u-icon name="close" size="12" color="#fff"></u-icon>
			</view>
		</view>
		<view class="upload__button" @click="upload">
			<view class="upload__button--icon">
				<u-icon name="camera" size="22"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {uploadImages,formatImg} from '@/common/custom_util.js';
	
	export default {
		data() {
			return {
				
			}
		},
		props: {
			value: {
				type: Array,
				default: () => []
			},
			sourceType: {
				type: Array,
				default: () => ['album', 'camera']
			},
			sizeType: {
				type: Array,
				default: () => ['original', 'compressed']
			},
			count: {
				type: Number,
				default: 9
			}
		},
		methods: {
			upload() {
				uploadImages({
					sizeType: this.sizeType,
					sourceType: this.sourceType,
					count: this.count
				},res => {
					let r = res.map(item => {
						return {
							extension: item.extension,
							height: item.height,
							width: item.width,
							path: item.path,
							type: item.type
						}
					})
					this.value.push(...r);
					this.$emit('input',this.value)
				});
			},
			deleteImage(i) {
				this.value.splice(i,1);
				this.$emit('input',this.value)
			},
			previewImage(i) {
				let urls = this.value.map(item => {
					return item.img
				})
				uni.previewImage({
					urls,
					current: i
				})
			},
			img(v) {
				return v.path ? formatImg(v.path) : '';
			}
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
	
	.upload {
		display: flex;
		flex-wrap: wrap;
		
		&__list {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			
			&--image {
				height: 100%;
			}
			
			&--deletable {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #373737;
				height: 20px;
				width: 20px;
				display: flex;
				flex-direction: row;
				border-bottom-left-radius: 100px;
				align-items: center;
				justify-content: center;
				z-index: 3;
				color: #fff;
			}
		}
		
		&__button{
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f5f5f5;
		}
	}
</style>
